Feat/#69 지도 페이지 UX 개선 및 버그 수정 #70
Conversation
주요 내용지도 컴포넌트의 줌 레벨 제약 조건 추가와 마지막 맵 중심점 저장 기능을 구현합니다. Zustand 스토어로 사용자의 이전 맵 위치를 보존하고, 여러 지도 컴포넌트에 기본 및 최소 줌 설정을 적용합니다. 변경 사항
시퀀스 다이어그램sequenceDiagram
participant User as 사용자
participant MapComp as MapComponent
participant Store as useLastMapCenterStore
participant Storage as 로컬 저장소
User->>MapComp: 맵 페이지 방문
MapComp->>Store: useLastMapCenterStore() 조회
alt lastMapCenter 존재
Store-->>MapComp: 저장된 중심점 반환
MapComp->>MapComp: defaultCenter 설정 (저장값)
else lastMapCenter 없음
Store-->>MapComp: null 반환
MapComp->>MapComp: defaultCenter 설정 (CAMPUS_LOCATION)
end
User->>MapComp: 맵 이동/상호작용
MapComp->>MapComp: 맵 중심점 변경
User->>MapComp: 페이지 떠남 (언마운트)
MapComp->>Store: setLastMapCenter(현재 중심점)
Store->>Storage: 맵 중심점 저장
Note over Storage: 다음 방문 시 복원됨
코드 검토 노력 예상🎯 2 (Simple) | ⏱️ ~12분
관련 가능 이슈
관련 가능 PR
토끼의 축시
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/app/map/MapComponent.tsx (1)
83-90: 컴포넌트 언마운트 시 지도 중심 저장이 올바르게 구현되었습니다.cleanup 함수에서 현재 지도 중심을 스토어에 저장하여 사용자가 다시 돌아왔을 때 마지막 위치를 유지합니다. 다만, 현재 구현은 메모리 기반이므로 페이지를 새로고침하면 상태가 초기화됩니다.
더 나은 UX를 위해 localStorage 기반 영속성을 고려해볼 수 있습니다:
// apps/web/app/_store/prevMapCenter.ts에서 import { create } from 'zustand' import { persist } from 'zustand/middleware' import { Coord } from '@/map/_utils/toLatLng' type LastMapCenter = { lastMapCenter: Coord | null setLastMapCenter: (mapCenter: Coord) => void } export const useLastMapCenterStore = create<LastMapCenter>()( persist( (set) => ({ lastMapCenter: null, setLastMapCenter: (mapCenter: Coord) => set({ lastMapCenter: mapCenter }), }), { name: 'last-map-center-storage', } ) )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/admin/src/app/requests/[id]/_components/Location/Location.tsx(1 hunks)apps/web/app/_store/prevMapCenter.ts(1 hunks)apps/web/app/map/MapComponent.tsx(4 hunks)apps/web/app/map/_components/PreviewPlace/PreviewPlace.tsx(1 hunks)apps/web/app/places/[id]/_components/Location/Location.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
apps/admin/src/app/requests/[id]/_components/Location/Location.tsx (4)
packages/ui/src/components/Icon/assets/icons/mapMarker.tsx (1)
props(3-40)apps/web/app/NaverMapProvider.tsx (1)
children(6-10)apps/web/app/map/_components/Marker/Marker.tsx (2)
icon(36-66)position(11-28)apps/admin/src/app/NaverMapProvider.tsx (1)
children(6-10)
apps/web/app/places/[id]/_components/Location/Location.tsx (1)
apps/web/app/map/_utils/toLatLng.ts (1)
toLatLng(4-7)
apps/web/app/map/MapComponent.tsx (2)
apps/web/app/_store/prevMapCenter.ts (1)
useLastMapCenterStore(9-12)apps/web/app/_constants/campus.ts (1)
CAMPUS_LOCATION(9-13)
🔇 Additional comments (7)
apps/admin/src/app/requests/[id]/_components/Location/Location.tsx (1)
20-25: 줌 설정이 적절합니다!상세 보기에 적합한 높은 줌 레벨(18)과 최소 줌 제한(15)으로 사용자가 컨텍스트를 잃지 않도록 방지합니다.
apps/web/app/map/_components/PreviewPlace/PreviewPlace.tsx (1)
38-38: 오버플로우 버그 수정이 적절합니다.사진을 최대 5개로 제한하여 PR 목표에서 언급된 마커 이미지 오버플로우 문제를 해결합니다.
apps/web/app/places/[id]/_components/Location/Location.tsx (1)
15-20: 일관된 줌 설정이 적용되었습니다.관리자 페이지의 Location 컴포넌트와 동일한 줌 설정을 사용하여 일관된 UX를 제공합니다.
apps/web/app/map/MapComponent.tsx (3)
9-9: 새로운 스토어 통합이 적절합니다.
useLastMapCenterStore를 임포트하여 지도 중심 위치 저장 기능을 추가합니다.
31-31: 지도 중심 계산 로직이 올바릅니다.
lastMapCenter가 있으면 이를 사용하고, 없으면 캠퍼스 기본 위치로 폴백하는 로직이 적절합니다.Also applies to: 35-35
110-113: 메인 지도의 줌 설정이 적절합니다.메인 지도 뷰는 상세 뷰(defaultZoom=18)보다 낮은 줌 레벨(15)을 사용하여 더 넓은 영역을 보여줍니다.
minZoom=12로 설정하여 충분한 컨텍스트를 유지합니다.apps/web/app/_store/prevMapCenter.ts (1)
1-12: Zustand 스토어 구현이 깔끔합니다.지도 중심 위치 저장을 위한 간단하고 명확한 스토어 구현입니다. 타입 정의가 명확하고 초기 상태 설정이 적절합니다.
#️⃣연관된 이슈
📝작업 내용
이번 작업에서는 지도 사용성을 높이기 위해 위치 기억 기능과 줌 설정을 추가하고, UI 버그를 수정했습니다.
1. 지도 마지막 위치 기억 기능 구현 (UX 개선)
기능: 사용자가 지도 페이지를 이탈했다가 다시 돌아왔을 때, 초기화되지 않고 마지막으로 보고 있던 위치에서 지도가 시작되도록 개선했습니다.
구현 방식:
useEffect의 Cleanup Function(언마운트 시점) 을 활용하여 페이지를 떠나는 순간의 지도 중심 좌표(center)를 전역 스토어에 저장합니다.
페이지 재진입 시 스토어에 저장된 좌표가 있다면 이를 defaultCenter로 설정하고, 없다면 기본 캠퍼스 좌표를 사용합니다.
2. 지도 줌(Zoom) 설정 최적화
NaverMap 컴포넌트에 defaultZoom과 minZoom 속성을 명시하여, 지도가 너무 축소되거나 확대되어 맥락을 잃는 경우를 방지했습니다.
3. 버그 수정
마커 이미지 오버플로우 해결: 마커 클릭 시 나타나는 PlacePreview 컴포넌트에서 이미지가 영역을 벗어나는 이슈를 수정했습니다.
스크린샷 (선택)
💬리뷰 요구사항(선택)
Summary by CodeRabbit
릴리스 노트
새로운 기능
개선사항
✏️ Tip: You can customize this high-level summary in your review settings.